<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
    }
  </style>
  <title>一个最简单的例子</title>
  <link rel="stylesheet" href="../library/ol/ol.css">
  <link rel="stylesheet" href="../css/common.css">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>

<body>
  <div id="map" class="map">
    <div id="popup"></div>
  </div>
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
  <script src="../library/ol/ol-debug.js"></script>
  <script src="./js/common.js"></script>
  <script type="text/javascript">
    $(() => {
      // 创建一个feature，并设置好在地图上的位置
      var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point([0, 0]),
        name: 'hi，嘎嘎嘎',
        test: 'what does the fox say',
        population: 4000,
        rainfall: 500
      });

      // 设置样式，在样式中就可以设置图标
      var iconStyleCurrent = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
          // x周居中，y轴朝下
          anchor: [0.5, 1],
          // anchorXUnits: 'fraction',
          // anchorYUnits: 'pixels',
          src: './imgs/location_current.png'
        }))
      });
      var iconStyle = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
          // x周居中，y轴朝下
          anchor: [0.5, 1],
          // anchorXUnits: 'fraction',
          // anchorYUnits: 'pixels',
          src: './imgs/location.png'
        }))
      });
      iconFeature.setStyle(iconStyle);

      var vectorSource = new ol.source.Vector({
        features: [iconFeature]
      });
      var vectorLayer = new ol.layer.Vector({
        source: vectorSource
      });

      var gaodeMapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
        })
      });

      var map = new ol.Map({
        layers: [gaodeMapLayer, vectorLayer],
        target: document.getElementById('map'),
        view: new ol.View({
          center: [0, 0],
          // projection: 'EPSG:4326',
          // 默認就爲3857
          // projection: 'EPSG:3857',
          zoom: 4,
          minZoom: 4,
          maxZoom: 14
        })
      });

      var element = document.getElementById('popup');

      var popup = new ol.Overlay({
        element: element,
        positioning: 'bottom-center',
        stopEvent: false,
        offset: [0, -50]
      });
      map.addOverlay(popup);

      // display popup on click
      map.on('click', function(evt) {
        var feature = map.forEachFeatureAtPixel(evt.pixel,
            function(feature) {
              return feature;
            });
        if (feature) {
          // feature.setStyle(iconStyleCurrent);
          var coordinates = feature.getGeometry().getCoordinates();
          popup.setPosition(coordinates);
          console.log(coordinates)
          $(element).popover({
            'placement': 'top',
            'html': true,
            'content': feature.get('name') + feature.get('test')
          });
          $(element).popover('show');
        } else {
          $(element).popover('destroy');
        }
      });

      // change mouse cursor when over marker
      map.on('pointermove', function(e) {
        if (e.dragging) {
          $(element).popover('destroy');
          return;
        }
        var pixel = map.getEventPixel(e.originalEvent);
        var hit = map.hasFeatureAtPixel(pixel);
        map.getTarget().style.cursor = hit ? 'pointer' : '';
      });
    })
  </script>
</body>